<template>
  <transition name="slide-fade" mode="out-in" appear>
  <div class="hello animated">
    <common-header :title="title"></common-header>
    <commonArticle :dataFormHome="Article"></commonArticle>
    <div class="commentsDetails">
      <h2>评论</h2>
      <div class="comment">
          <div class="comment_header">
            <div class="auther_img"><img src="@/assets/ding.png"></div>
            <span class="auther_name">小新</span>
            <!-- <span class="iconfont down">&#xe66e; </span>
            <span class="iconfont zan">&#xe66d;<samp>245</samp></span> -->
          </div>
          <div class="comment_body">
            <p>我也会写诗呢</p>
            <img src="http://oh2qid53p.bkt.clouddn.com/text-img00001.jpg">
            <div class="comments">
                <p><span class="auther_name2">啊哒哒哒</span><span>:</span>说实话，农大罗西长的其实还是挺漂亮的</p>
                <p><span class="auther_name2">岸边人</span><span>:</span>我站的擂台都是我的地盘</p>
                <a href="javascript:void(0)">查看33条评论</a>
            </div>
          </div>
      </div>
      <div class="comment">
          <div class="comment_header">
            <div class="auther_img"><img src="@/assets/ding.png"></div>
            <span class="auther_name">小新</span>
            <!-- <span class="iconfont down">&#xe66e;</span>
            <span class="iconfont zan">&#xe66d;<samp>248</samp></span> -->
          </div>
          <div class="comment_body">
            <p>我也会写诗呢</p>
            <img src="http://oh2qid53p.bkt.clouddn.com/text-img00001.jpg">
            <div class="comments">
                <p><span class="auther_name2">啊哒哒哒</span><span>:</span>说实话，农大罗西长的其实还是挺漂亮的</p>
                <p><span class="auther_name2">岸边人</span><span>:</span>我站的擂台都是我的地盘</p>
                <a href="javascript:void(0)">查看33条评论</a>
            </div>
          </div>
      </div>
      <div class="comment">
          <div class="comment_header">
            <div class="auther_img"><img src="@/assets/ding.png"></div>
            <span class="auther_name">小新</span>
            <!-- <span class="iconfont down">&#xe66e;</span>
            <span class="iconfont zan">&#xe66d; <samp>247</samp></span> -->
          </div>
          <div class="comment_body">
            <p>我也会写诗呢</p>
            <img src="http://oh2qid53p.bkt.clouddn.com/text-img00001.jpg">
            <div class="comments">
                <p><span class="auther_name2">啊哒哒哒</span><span>:</span>说实话，农大罗西长的其实还是挺漂亮的</p>
                <p><span class="auther_name2">岸边人</span><span>:</span>我站的擂台都是我的地盘</p>
                <a href="javascript:void(0)">查看33条评论</a>
            </div>
          </div>
      </div>
      <comment-form :commentsId="Article.id"></comment-form>
    </div>
  </div>
  
  </transition>
</template>

<script>
import store from "@/vuex/store"
import commonHeader from "@/components/common/commonHeader"
import commonArticle from "@/components/common/commonArticle"
import {sessionStore} from "@/base/js/localStore"
import commentForm from "@/components/common/commentForm"
export default {
  name: 'Homedetails',
  data () {
    return {
      title: '帖子详情',
      Article:{}
    }
  },
  components:{
    commonHeader,commonArticle,commentForm
  },
  store,
  mounted(){
    // this.$store.commit("hometoDetailsStore",getLocal("detail"))
  },
  created(){
    // console.log(this.$route)
    // console.log(this.$store)
    // this.Article=this.$route.params
    // this.Article=this.$store.state.hometoDetails
    this.Article=JSON.parse(sessionStore.getLocal('detail'));
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped type="text/css" lang="less">
.commentsDetails{
  padding-bottom:32px;
  >h2{
    padding:10px 0 15px;
  }
  .comment{
    border-top:1px solid #dedede;
    .comment_header{
      overflow:hidden;
      position:relative;
      .auther_img{
        width:48px;
        height:48px;
        border-radius:50%;
        overflow:hidden;
        display:inline-block;
        vertical-align:middle;
        img{
          width:100%;
          height:100%;
        }
      }
      span.iconfont{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        samp{
          font-family:"Microsoft Yahei"
        }
      }
      span.down{
        right:8px;
      }
      span.zan{
        right:24px;
      }
    }
    .comment_body{
      padding-left:48px;
      padding-right:8px;
      p{
        margin:8px 0;
        line-height:20px;
      }
      img{
        width:100%;
      }
    }
    .comment{
      padding:10px 0 15px 48px;
      background-color:#dedede
    }
    .comments{
      padding:8px;
      margin:8px 0;
      background-color:#EEE;
      border-radius:4px;
      .auther_name2{
        color:#182dce
      }
      a{
        color:#182dce
      }
    }
  }
}  
</style>
